import React from 'react';
import { Outlet, useLocation, Link } from 'react-router-dom';
import { 
  HomeOutlined, 
  AppstoreOutlined, 
  ShoppingCartOutlined, 
  UserOutlined 
} from '@ant-design/icons';
import { Badge } from 'antd';
import { getCart } from '../../utils/storage';

const MobileLayout = () => {
  const location = useLocation();
  const cart = getCart();
  const cartCount = cart.length; // 显示商品种类数，不是总数量

  const navItems = [
    {
      key: '/app',
      icon: <HomeOutlined />,
      label: '首页',
      path: '/app'
    },
    {
      key: '/app/category',
      icon: <AppstoreOutlined />,
      label: '分类',
      path: '/app/category'
    },
    {
      key: '/app/cart',
      icon: <ShoppingCartOutlined />,
      label: '购物车',
      path: '/app/cart',
      badge: cartCount
    },
    {
      key: '/app/profile',
      icon: <UserOutlined />,
      label: '我的',
      path: '/app/profile'
    }
  ];

  const isActive = (path) => {
    if (path === '/app') {
      return location.pathname === '/app';
    }
    return location.pathname.startsWith(path);
  };

  return (
    <div className="mobile-container">
      <div className="mobile-content">
        <Outlet />
      </div>
      
      <div className="mobile-bottom-nav">
        {navItems.map(item => (
          <Link
            key={item.key}
            to={item.path}
            className={`nav-item ${isActive(item.path) ? 'active' : ''}`}
          >
            <div className="icon">
              {item.badge ? (
                <Badge count={item.badge} size="small">
                  {item.icon}
                </Badge>
              ) : (
                item.icon
              )}
            </div>
            <span>{item.label}</span>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default MobileLayout; 